@charset 'utf-8';

$font: "Adobe Heiti Std";

@mixin reuse-flex($flex-direction: row, $flex-wrap: nowrap) {
    display: flex;
    flex-wrap: $flex-wrap;
    flex-direction: $flex-direction;
}

%reuse_placeholder {
    font-family: "Adobe Heiti Std";
    /* placeholder颜色  */
    color: rgba(255, 255, 255, 0.6);
    /* placeholder字体大小  */
    font-size: 13px;
    /* placeholder位置  */
    text-align: left;
}

.web {
    width: 100%;
    background: #fff;
}

// 头部
header {
    // 背景
    background: url('../images/public/bg2.png') no-repeat center;
    background-size: 100% 100%;
    height: 735px;

    .wrap {
        height: 90px;
        background: #fff;

        // help
        .help {
            margin: 15px 165px 25px 20px;
            box-sizing: border-box;
            font-size: 12px;
            font-family: $font;
            @include reuse-flex;
            align-items: center;
            justify-content: flex-end;

            li {
                border-right: 1px solid #b3b2b2;
                padding: 0 5px;

                a {
                    color: #b3b2b2;
                }
            }

            li:last-child {
                border: none;
            }

        }

        .mod {
            @include reuse-flex;
            align-items: center;
            justify-content: space-around;

            // logo
            .logo {
                width: 249px;
                height: 34px;

                img {
                    width: 100%;
                }
            }

            // nav
            .nav {
                @include reuse-flex;
                align-items: center;

                li {
                    font-size: 14px;
                    font-family: $font;
                    padding: 10px;
                    margin-right: 25px;

                    a {
                        color: #7a7878;
                    }

                }

                li.active {
                    border-bottom: 4px solid #1abc9c;

                    a {
                        color: #f9989d;
                    }
                }
            }
        }

    }

    .sub {
        position: relative;

        // 推荐
        .rcommd {
            width: 600px;
            text-align: right;
            position: absolute;
            top: 175px;
            right: 190px;

            p:nth-child(1) {
                font-size: 26px;
                font-family: "Myriad Pro";
                color: rgb(255, 255, 255);
                text-align: left;
                margin-bottom: 30px;
            }

            p:nth-child(2) {
                font-size: 30px;
                font-family: $font;
                color: rgb(255, 255, 255);
            }

            .btn {
                margin-top: 75px;

                button {
                    width: 170px;
                    height: 56px;
                    border-radius: 5px;
                    border: none;
                    cursor: pointer;
                    color: #fff;
                    font-size: 18px;
                    line-height: 56px;
                }

                button:nth-child(1) {
                    background: #f9989d;
                    margin-right: 15px;
                }

                button:nth-child(2) {
                    background: #3498db;
                }
            }
        }

        // 左边耳机
        .left_earphone {
            position: absolute;
            top: 130px;
            left: 145px;
            width: 558px;
            height: 493px;

            img {
                width: 100%;
            }

        }
    }


}

// 页脚
footer {
    margin-top: 60px;


    .info {
        @include reuse-flex;
        justify-content: center;
        align-items: flex-end;
        background: #38373d;
        padding: 55px 0 40px;
        box-sizing: border-box;

        .info_code {
            margin: 0 0 50px;
        }

        .info_tel {
            margin: 0 25px 50px;
        }

        .info_form {
            .tilte {
                color: #fff;
            }

            form {
                width: 395px;

                div {
                    margin: 10px 0;
                    width: 100%;
                    text-align: right;

                    input {
                        height: 40px;
                        line-height: 40px;
                        border: none;
                        border-radius: 5px;
                        background: #5d6d7e;
                        color: #fff;
                        outline: none;
                        padding: 0 15px;
                        box-sizing: border-box;

                        &::-webkit-input-placeholder {
                            @extend %reuse_placeholder;
                        }
                    }

                    textarea {
                        width: 100%;
                        height: 144px;
                        border: none;
                        border-radius: 5px;
                        background: #5d6d7e;
                        color: #fff;
                        outline: none;
                        padding: 20px 15px;
                        resize: none;
                        box-sizing: border-box;

                        &::-webkit-input-placeholder {
                            @extend %reuse_placeholder;
                        }
                    }
                }

                div:nth-child(1) {
                    @include reuse-flex;

                    input:nth-child(1) {
                        width: 40%;
                        margin-right: 25px;
                    }

                    input:nth-child(2) {
                        width: 60%;
                    }
                }

                div:nth-child(2) {
                    input {
                        width: 100%;
                    }
                }

                div:nth-child(3) {
                    width: 100%;
                }

                div:nth-child(4) {
                    text-align: right;

                    button {
                        width: 98px;
                        height: 30px;
                        line-height: 30px;
                        color: #fff;
                        border: none;
                        text-align: center;
                        font-size: 18px;
                        background: #3498db;
                        border-radius: 5px;
                        cursor: pointer;
                    }
                }

            }
        }
    }

    .bottom_banner {
        background: #2c3e50;
        box-sizing: border-box;
        padding: 45px 0 40px;
        position: relative;

        &::before {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            top: -80px;
            width: 0;
            height: 0;
            border-width: 40px 35px;
            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2c3e50 rgba(0, 0, 0, 0);
            border-style: solid;
            transform: translateX(-50%);
        }

        .bm_company {
            font-size: 14px;
            font-family: "Adobe Heiti Std";
            color: #fff;
            text-align: center;
            margin-bottom: 10px;
        }

        .bm_copyright {
            font-size: 12px;
            font-family: "Adobe Heiti Std";
            color: #ebe9e9;
            text-align: center;
        }


    }
}